<template>
    <div class="contain">
        <div class="btn1">
            <div>公益名称</div>
            <el-input style="width: 200px;margin-left: 10px;" v-model="input" placeholder="请输入公益名称"></el-input>
            <!-- 搜索按钮 -->
            <!--            <el-button @click="searchByName()" style="margin-left: 20px;" type="primary">搜索</el-button>-->
            <el-button style="margin-left: 20px;" type="primary" @click="clickLike">搜索</el-button>
            <!-- 重置按钮 -->
            <el-button @click="clear()" style="margin-left: 20px;" type="primary">添加公益</el-button>
        </div>
        <!-- 表格 -->
        <!--         @selection-change="selectionChange"-->
        <el-table :cell-style="cellStyle" :header-cell-style="headerStyle" ref="multipleTable" :data="tableData"
                  tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
                    width="50">
            </el-table-column>
            <el-table-column prop="name" label="标题" width="100">
            </el-table-column>


            <el-table-column prop="picture" label="图片" width="150" align="center">
                <template slot-scope="scope">
                    <div class="img-container"  >
                        <img v-if="scope.row.picture.substr(0,5) === 'https' " :src="scope.row.picture" min-width="70" height="70"/>
                        <img v-else :src="'http://localhost:8080/upload/down?filename=' + scope.row.picture" min-width="70" height="70"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="simplyintroduce" label="简介" width="300">
            </el-table-column>
            <el-table-column prop="text" label="详情" width="200">
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="100">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="searchMessageById(scope.row)" type="text" size="small">
                        编辑公益
                    </el-button>
                    <el-button @click="deleteById(scope.$index)" slot="reference" type="text" size="small">删除公益
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页操作 -->
<!--        <el-pagination :page-size="5" @current-change="pageChange"-->
<!--                       background layout="total, prev, pager, next, jumper"-->
<!--                       :total="total"></el-pagination>-->
        <template>
            <div>
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        @prev-click="getPrePage"
                        @next-click="getNextPage"
                        :total="pageTotal"
                >
                </el-pagination>
            </div>
        </template>
<!--             新增文章的嵌套表格-->
        <el-dialog title="新增公益" width="600px" :visible.sync="dialogFormVisible1"
        >
            <el-form :model="form1">
                <el-form-item style="display:flex" label="标题" :label-width="formLabelWidth">
                    <el-input style="width: 300px;" v-model="form1.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="display:flex" label="简介" :label-width="formLabelWidth">
                    <el-input style="width: 300px;" v-model="form1.simplyintroduce" autocomplete="off"></el-input>
                </el-form-item>
<!--                <el-form-item style="display:flex" label="封面图" :label-width="formLabelWidth">-->
<!--                    <el-upload class="upload-demo" :on-success="success1"-->
<!--                               action="http://localhost:8080/sfzy/upload/image">-->
<!--                        <el-button size="small" type="primary">点击上传</el-button>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->

<!--                <el-upload-->
<!--                        action="http://localhost:8080/upload/image"-->
<!--                        list-type="picture-card"-->
<!--                        :auto-upload="true"-->
<!--                        :on-success="success1">-->
<!--                    <i slot="default" class="el-icon-plus"></i>-->
<!--                    <div slot="file" slot-scope="{file}">-->
<!--                        <img-->
<!--                                class="el-upload-list__item-thumbnail"-->
<!--                                :src="file.url" alt=""-->
<!--                        >-->
<!--                        <span class="el-upload-list__item-actions">-->
<!--        <span-->
<!--                class="el-upload-list__item-preview"-->
<!--                @click="handlePictureCardPreview(file)"-->
<!--        >-->
<!--          <i class="el-icon-zoom-in"></i>-->
<!--        </span>-->
<!--        <span-->
<!--                v-if="!disabled"-->
<!--                class="el-upload-list__item-delete"-->
<!--                @click="handleDownload(file)"-->
<!--        >-->
<!--          <i class="el-icon-download"></i>-->
<!--        </span>-->
<!--        <span-->
<!--                v-if="!disabled"-->
<!--                class="el-upload-list__item-delete"-->
<!--                @click="handleRemove(file)"-->
<!--        >-->
<!--          <i class="el-icon-delete"></i>-->
<!--        </span>-->
<!--      </span>-->
<!--                    </div>-->
<!--                </el-upload>-->

                <div :style="{textAlign:'left',marginLeft:'115px'}">
                    <el-upload action="http://localhost:8080/upload/image"
                               name="file"
                               list-type="picture-card" :auto-upload="true"
                               :on-success="success1"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                      <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleDownload(file)">
                                      <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleRemove(file)">
                                      <i class="el-icon-delete"></i>
                                    </span>
                                  </span>
                        </div>
                    </el-upload>
                </div>

                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <el-form-item style="display:flex" label="详情" :label-width="formLabelWidth">
                    <el-input style="width: 300px;" type="textarea" placeholder="请输入详情内容" v-model="form1.text"
                              maxlength="200" show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="addfree">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改文章的嵌套表格 -->
        <el-dialog @close="closeDialog1()" title="修改公益信息" width="600px" :visible.sync="dialogFormVisible2">
            <el-form :model="form2">
                <el-form-item style="display:flex" label="标题" :label-width="formLabelWidth">
                    <el-input style="width: 300px;" v-model="form2.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="display:flex" label="简介" :label-width="formLabelWidth">
                    <el-input style="width: 300px;" v-model="form2.simplyintroduce" autocomplete="off"></el-input>
                </el-form-item>

                <div :style="{textAlign:'left',marginLeft:'115px'}">
                    <el-upload action="http://localhost:8080/upload/image"
                               name="file"
                               list-type="picture-card" :auto-upload="true"
                               :on-success="success2"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                      <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleDownload(file)">
                                      <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                          @click="handleRemove(file)">
                                      <i class="el-icon-delete"></i>
                                    </span>
                                  </span>
                        </div>
                    </el-upload>
                </div>

                <el-form-item style="display:flex" label="详情" :label-width="formLabelWidth">
                    <el-input type="textarea" placeholder="请输入详情内容" v-model="form2.text" maxlength="200"
                              show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click=" dialogFormVisible2= false">取消</el-button>
                <el-button type="primary" @click="updateMessageById">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "WelfareContentView",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                title: "",
                pageTotal:0,
                formLabelWidth: "",
                tableData: [], //表格数据数组
                input: "", //输入框中的内容
                currentPage:1,
                pageSize:5,
                dialogFormVisible1: false,  //新增弹窗
                dialogFormVisible2: false,  //修改弹窗
                form1: {
                    id: '',
                    name: '',
                    picture: '',
                    simplyintroduce: '',
                    text: '',
                    createtime: '',
                },
                form2: {
                    id: '',
                    name: '',
                    picture: '',
                    simplyintroduce: '',
                    text: '',
                    createtime: '',
                }
            }
        },
        methods: {
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.selAllFree();
            },
            getPrePage(val) {
                this.currentPage=val;
                this.selAllFree();
            },
            getNextPage(val) {
                this.currentPage=val;
                this.selAllFree();
            },


            // 修改单元格对齐方式
            cellStyle() {
                return {
                    'text-align': 'center'
                }
            },
            //保存数据
            // saveDate() {
            //     if (this.state === 1) {
            //         this.addfree();
            //         setTimeout(() => {
            //             this.refresh()
            //         }, 500);
            //     }
            //     if (this.state === 2) {
            //         this.updateMessageById();
            //         setTimeout(() => {
            //             this.refresh()
            //         }, 500);
            //     }
            // },
            // 修改表格表头格式
            headerStyle() {
                return {
                    background: '#0b8bff',
                    color: 'white',
                    'text-align': 'center'
                }
            },
            //打开添加知识页面 并且清空数据
            clear() {
                //清空输入框
                this.form1 = {};
                //打开
                this.dialogFormVisible1 = true;
            },
           // 修改时成功上传的回调函数
            success1(res) {
                console.log()
                this.form1.picture=res.data;

            },
            success2(res) {
                console.log()
                this.form2.picture=res.data;

            },

            //关闭修改嵌套表格时的回调函数
            closeDialog1() {
                this.form = {};
            },

            // pageChange(val) {
            //     //获取当前页码数
            //     this.page = val;
            //     this.pagenum=val;//
            //     //重新运行查询方法l
            //     this.selAllFree();
            // },
            //转换时间格式
            getCurrentDateTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth + 1;
                const day = now.getDate();
                const hours = now.getHours();
                const minutes = now.getMinutes();
                const seconds = now.getSeconds();
                return `${year}-${month}-${day}`;
            },
            //添加
            addfree() {
                this.axios.post("/free/add", {
                    name: this.form1.name,
                    simplyintroduce: this.form1.simplyintroduce,
                    picture: this.form1.picture,
                    text: this.form1.text,
                }).then(res => {
                    this.selAllFree();

                })
                this.dialogFormVisible1 = false;
            },
            //数据回显
            searchMessageById(row) {
                console.log(row)
                this.dialogFormVisible2 = true;
                this.form2.id = row.id;
                this.form2.name = row.name;
                this.form2.simplyintroduce = row.simplyintroduce;
                this.form2.picture = row.picture;
                this.form2.text = row.text;
            },
            updateMessageById() {
                this.axios.post("/free/update", {
                    id: this.form2.id,
                    name: this.form2.name,
                    simplyintroduce: this.form2.simplyintroduce,
                    picture: this.form2.picture,
                    text: this.form2.text,

                }).then(res => {
                    console.log(res)
                    this.selAllFree();
                })
                this.dialogFormVisible2 = false;
            },

            //按id删除
            deleteById(index) {
                console.log(index)
                this.axios.delete("/free/del", {
                    params: {
                        id: this.tableData[index].id
                    }
                }).then(res => {

                    this.selAllFree();
                })
            },

            //模糊搜索
            clickLike() {
                this.axios.get("/free/like", {
                    params: {
                        name: this.input
                    }
                }).then(res => {
                    console.log(res)
                    //赋值
                    this.tableData = res.data.data;
                })
            },


            //查询所有信息
            selAllFree() {
                this.axios.get("/free/select1", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize:this.pageSize
                    }
                }).then(res => {
                    console.log(res)
                    //赋值
                    this.tableData = res.data.data.list;
                    this.pageTotal = res.data.data.total;
                })
            }
        },
        //生命周期函数
        created() {
            this.selAllFree()
        }
    }
</script>
<style scoped>
    .btn1 {
        display: flex;
        align-items: center;
    }
</style>